<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../js/babel.min.js"></script>
    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
</head>
<body>
    <div id="example1"></div>
    <div id="example2"></div>
</body>
</html>
<script type="text/babel">
class MyComponent extends React.Component{
    constructor(props){
        super(props)
        this.showInput=this.showInput.bind(this)
        this.handleBlur=this.handleBlur.bind(this)
    }
    showInput(){
        const input=this.refs.content;
        console.log(input.value);//获取第一个输入框的值
        //input=>this.input=input input指的是<input/>本身，然后箭头函数把自身赋值到组件上面即this上面
        console.log(this.input.value);//获取第二个输入框的值
    }
    handleBlur(event){
        console.log(event.target.value)
    }
   render(){
       return(
           <div>
                // 方式一
                <input type="text" ref="content"/>
                //方式二
                <input type="text" ref={input=>this.input=input}/>
                <button onClick={this.showInput}>提示输入</button>
                <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/>
           </div>
       )
   }
}
ReactDOM.render(<MyComponent/>,document.getElementById('example1'))

</script>